<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  <link rel="manifest" href="site.webmanifest">
  <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitch Chat TTS</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  <script src="https://kit.fontawesome.com/9f09c1c112.js" crossorigin="anonymous"></script>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:creator" content="@seanhweb" />

  <meta property="og:url" content="https://www.twitchtts.net" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Twitch Chat TTS" />
  <meta property="og:description"
    content="Please enter a channel below, then click Start Listening for text to speech." />
  <meta property="og:image" content="https://www.twitchtts.net/images/ogshare.jpg" />
  <script src="https://js.stripe.com/v3/"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-JT0GEBW5MK"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'G-JT0GEBW5MK');
  </script>

</head>

<body>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12">
          <h1>Twitch Chat TTS</h1>
          <p>Please enter a channel below, then click "Start Listening" for text to speech.</p>
          <form action="#">
            <div class="row">
              <div class="col-lg-8 col-md-8 col-sm-8 col">
                <input id="channelname" name="channel" type="text" class="form-control" />
              </div>
              <div class="col-lg-4 col-md-4 4 col-sm-4 col">
                <button class="btn btn-primary" onclick="startListening()" id="listenBtn" type="submit"> Start
                  Listening</button>
              </div>
            </div>
          </form>
          <p></p>
          <div id="status" class="alert alert-info">
            Waiting for channel name...
          </div>
          <p></p>
          <div id="options-container" class="container">
            <div class="row">
              <div class="col-6">
                <label for="volume"><small>Speech Volume</small></label>
              </div>
              <div class="col-6">
                <i class="bi bi-volume-up-fill"></i>
                <input id="volume" type="range" min="0" max="1" value="1" step="0.1" onchange="volumeChange()">
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <label for="voiceSelect"><small>Voice (not applicable to Polly)</small></label>
              </div>
              <div class="col-6">
                <select id="voiceSelect" class="form-control"></select>
              </div>
            </div> 
            <div class="row">
              <div class="col-6">
                <label for="hqspeech"><small>Use <a href="https://aws.amazon.com/polly/" target="_blank">Amazon Polly</a> (Beta)</small></label>
              </div>
              <div class="col-6">
                <input id="hqspeech" type="checkbox" />
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <label for="modsonly"><small>Limit TTS to Moderators Only</small></label>
              </div>
              <div class="col-5">
                <input id="modsonly" type="checkbox" />
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <label for="announcechatter"><small>Announce Chatter's Name Before Message</small></label>
              </div>
              <div class="col-6">
                <input id="announcechatter" type="checkbox" />
              </div>
            </div>            
            <div class="row">
              <div class="col-12">
              <small><i>Note: Amazon Polly integration is a very early work in progress. Messages sent will <a
                    href="https://www.youtube.com/watch?v=YyIrilqBDaU" target="_blank">parry</a> each other, rather than
                  queue.</i></small>
                </div>
            </div>
            <div class="row">
              <audio id="audiotrack"></audio>
            </div>
            <div class="row">
              <button class="btn btn-dark mt-3 ml-2" data-toggle="modal" data-target="#settingsModal" onclick="exportSettings()">Export Channel to URL</button>
            </div>
            <div class="row">
              <button class="btn btn-danger mt-3 ml-2" onclick="skipMessage()">Skip Message</button>
            </div>            
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 pt-3">
          <div class="card">
            <img class="card-img-top" src="images/ogshare.jpg" alt="PeepoG">
            <div class="card-body">
              <h5 class="card-title">Tip Jar</h5>
              <p class="card-text">While not required by any means, sending a tip helps pay for server costs and my time developing this project. Thanks so much!</p>
              <form action="#">
                <div class="row">
                  <div class="col-6">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <div class="input-group-text">$</div>
                        <input type="number" min="0" class="form-control" value="5" id="tipAmount" onchange="valueCheck()" />
                      </div>
                    </div>
                  </div>
                  <div class="col-6">
                    <button class="btn btn-primary" id="tipBtn" type="submit" onclick="startCheckout()">Send Tip</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="settingsModalLabel">Browser Source Export</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Below is a url you can place as a browser source into OBS. This URL will auto apply your channel name and start listening for messages.</p><p>Note that only Amazon Polly is supported as a browser source for OBS.</p>
          <div class="row">
            <div class="col-8">
            <input id="settingsURL" class="form-control" value="" disabled />
          </div>
          <div class="col-4">
            <button class="btn btn-outline-dark" onclick="copyURL()">Copy URL</button>
          </div>
         </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <div class="container" id="main">
    <div id="messages"></div>
  </div>
  <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Twitch TTS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/seanhweb/Twitch-Text-to-Speech" target="_blank">Source Code</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.seanhweb.com" target="_blank">Creator - Seanhweb</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <script src="tmi.min.js"></script>
  <script src="app.js?v=2"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  
</body>

</html>
